<template>
    <div class="complex-table-container">
        <ul class="complex-ul">
            <li style="background-color: #eef1f6">
                <span class="p20 bolder">参数</span><span
                    class="p20 bolder">字段类型</span><span
                    class="p10 bolder">是否必须</span><span
                    class="p50 bolder">注释</span>
            </li>
            <li v-if="tableData == undefined" class="empty-li">
                暂无数据
            </li>
            <li v-for="item in tableData">
                <span class="p20">{{ item.paramName }}</span><span
                    class="p20">{{ item.paramType }}</span><span
                    class="p10">{{ item.required }}</span><span
                    class="p50">{{ item.remark }}</span>
                <div class="sub-container" v-if="item.subs != undefined">
                    <complex-table-container :table-data="item.subs"></complex-table-container>
                </div>
            </li>
            </tbody>
        </ul>
    </div>
</template>
<script>
    export default {
        name: 'complex-table-container',
        props: ["tableData"]
    }
</script>
<style>
    .sub-container {
        width: 98%;
        margin-left: 1%;
        margin-bottom: 10px;
    }

    .empty-li {
        min-height: 60px !important;;
        line-height: 60px !important;
        text-align: center;
        width: 100%;
        color: #5e7382;

    }

    .bolder {
        font-weight: bolder;
    }

    .p20 {
        width: 20%;
    }

    .p10 {
        width: 10%;
    }

    .p50 {
        width: 50%;
        text-align: center;
    }

    .complex-table-container {
        width: 100%;
    }

    .complex-ul {
        width: 100%;
        display: table;
        border-collapse: collapse;
        border-spacing: 2px;
        border: solid #dfe6ec 1px;

    }

    .complex-ul li {
        list-style: none;
        font-size: 14px;
        line-height: 30px;
        width: 100%;
        border-bottom: 1px solid #dfe6ec;
    }

    .complex-ul li:last-of-type {
        border-bottom: none;
    }

    .complex-ul li span {
        display: inline-block;
        outline: none;
        box-sizing: border-box;
        padding-left: 10px;
    }

</style>